<template>
  <basic-container>
    <div>
      <div class="resultTitle">文件验证完成</div>
      <div class="contractInfo noModify">
        <div class="contractInfoTitle">
          <div class="titleLine"></div>
          <div class="contractInfoTitleText">电子文件信息</div>
        </div>
        <!-- 合同信息 -->
        <div class="contractInfoContent">
          <div class="contractInfoContentItem">
            <div class="contractInfoContentItemLabel">文件名称：</div>
            <div class="contractInfoContentItemValue">1653458868325.pdf</div>
          </div>
          <div class="contractInfoContentItem">
            <div class="contractInfoContentItemLabel">文件大小：</div>
            <div class="contractInfoContentItemValue">313KB</div>
          </div>
        </div>
      </div>
      <!-- 校验结果信息 -->
      <div class="checkContent">
        <div class="checkContentTitle">
          <div class="titleLine"></div>
          <div class="checkContentTitleDescription">文件中共包含2个电子签名</div>
        </div>
        <div class="checkContentItemBox">
          <!--        下面这个checkContentItem里面写for-->
          <div class="checkContentItem">
            <div class="checkContentItemLeft">
              <div class="checkContentItemLeftTitle">签名信息</div>
              <div class="checkContentItemLeftDescriptionItem">
                <div class="checkContentItemLeftDescriptionItemLabel">签名方：</div>
                <div class="checkContentItemLeftDescriptionItemValue">zhouyu</div>
              </div>
              <div class="checkContentItemLeftDescriptionItem">
                <div class="checkContentItemLeftDescriptionItemLabel">签署时间：</div>
                <div class="checkContentItemLeftDescriptionItemValue">2022-05-25 14:01:51</div>
              </div>
              <div class="checkContentItemLeftDescriptionItem">
                <div class="checkContentItemLeftDescriptionItemLabel">签署时间来源：</div>
                <div class="checkContentItemLeftDescriptionItemValue">本地时间</div>
              </div>
              <div class="checkContentItemLeftDescriptionItem">
                <div class="checkContentItemLeftDescriptionItemLabel">保护区Hash(Base64)：</div>
                <div class="checkContentItemLeftDescriptionItemValue">tGZwE7Vy18wlRVKcuzr5nuE17LqZr0y2IEKXYwEJsQo=</div>
              </div>

              <div class="checkContentItemLeftTitle">证书信息</div>
              <div class="checkContentItemLeftDescriptionItem">
                <div class="checkContentItemLeftDescriptionItemLabel">序列号：</div>
                <div class="checkContentItemLeftDescriptionItemValue">1</div>
              </div>
              <div class="checkContentItemLeftDescriptionItem">
                <div class="checkContentItemLeftDescriptionItemLabel">颁发机构：</div>
                <div class="checkContentItemLeftDescriptionItemValue">Graduation Project CA By ZhouYu</div>
              </div>
              <div class="checkContentItemLeftDescriptionItem">
                <div class="checkContentItemLeftDescriptionItemLabel">有效期：</div>
                <div class="checkContentItemLeftDescriptionItemValue">2022-05-14 12:11:42 ~ 2023-05-14 12:11:42</div>
              </div>
            </div>
            <div class="checkContentItemRight">
              <div class="checkContentItemRightResult">
                <div class="icon"><el-icon><CircleCheck /></el-icon></div>
                <div class="checkContentItemRightResultDescription">签名有效</div>
              </div>
              <div class="checkContentItemRightResult">
                <div class="icon"><el-icon><CircleCheck /></el-icon></div>
                <div class="checkContentItemRightResultDescription">自签名以来，内容未被修改</div>
              </div>
              <div class="checkContentItemRightSignature">
                <img src="../../img/img_3.png">
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="btn-group">
        <el-button class="return-btn">返回</el-button>
        <el-button class="upload-btn">继续上传</el-button>
      </div>
    </div>

  </basic-container>
</template>

<script setup>

</script>

<style scoped>
/deep/ .el-card__body{
  padding: 30px 60px;
  min-height: 71vh;
  background-color: #ffffff;
}
.resultTitle{
  font-size: 30px;
  font-weight: 600;
  color: #202640;
  line-height: 42px;
  margin: 28px 0;
  padding-bottom: 20px;
  text-align: center;
}

.contractInfo {
  margin: 10px 0;
  padding-bottom: 23px;
  border: 0px solid #e4e4e4;
  border-bottom-width: 1.5px;
}
.noModify {
  background: url('../../img/verify/verify-success.svg') no-repeat left 310px top 0 / 140px;
}
.contractInfoTitle {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  margin: 0 40px 16px;
}
.titleLine {
  width: 4px;
  height: 16px;
  background: #e61717;
  margin-right: 8px;
}
.contractInfoTitleText{
  height: 30px;
  font-size: 14px;
  font-weight: 600;
  color: #202640;
  line-height: 30px;
}
.contractInfoContent {
  margin: 0 40px;
}
.contractInfoContentItem{
  display: flex;
  align-items: center;
}
.contractInfoContentItem .contractInfoContentItemLabel{
  width: 170px;
  font-size: 14px;
  font-weight: 400;
  color: #202640;
  line-height: 30px;
  flex: none;
}
.contractInfoContentItem .contractInfoContentItemValue{
  font-size: 14px;
  color: #333;
}
.checkContent {
  padding: 40px 40px;
}
.checkContentTitle{
  display: flex;
  align-items: center;
}
.checkContentTitleDescription {
  height: 30px;
  font-size: 14px;
  font-weight: 600;
  color: #202640;
  line-height: 30px;
}
.checkContent .checkContentItem:first-child {
  padding-top: 0px;
}
.checkContent .checkContentItem {
  display: flex;
  justify-content: space-between;
  padding-top: 8px;
  padding-bottom: 40px;
  border: 0px solid #e4e4e4;
  border-bottom-width: 1px;
}
/*左侧信息*/
.checkContent .checkContentItem .checkContentItemLeftTitle {
  height: 30px;
  font-size: 14px;
  font-weight: 400;
  color: #a6aabb;
  line-height: 30px;
  margin-top: 16px;
}
.checkContentItemLeftDescriptionItem {
  display: flex;
  align-items: center;
}
.checkContentItemLeftDescriptionItem .checkContentItemLeftDescriptionItemLabel {
  width: 170px;
  font-size: 14px;
  font-weight: 400;
  color: #202640;
  line-height: 30px;
  flex: none;
}
.checkContentItemLeftDescriptionItem .checkContentItemLeftDescriptionItemValue{
  font-size: 14px;
  color: #333;
}
/*右侧信息*/
.checkContent .checkContentItem .checkContentItemRight {
  margin-top: 16px;
}
.checkContentItemRight .checkContentItemRightResult {
  display: flex;
  align-items: baseline;
}
.checkContentItemRight .icon {
  font-size: 16px;
  margin-right: 6px;
  color: #3cb175;
}
.checkContentItemRight .checkContentItemRightResultDescription {
  height: 30px;
  font-size: 14px;
  font-weight: 400;
  color: #666b80;
  line-height: 30px;
}
.checkContentItemRight .checkContentItemRightSignature {
  margin-top: 53px;
}
.checkContentItemRight .checkContentItemRightSignature img{
  width: 140px;
  display: block;
  height: auto;
  border: none;
}
.btn-group{
  text-align: center;
}
.return-btn{
  border: 1px solid black;
  background: #fff;
  color: black;
  position: relative;
  width: 160px;
  height: 42px;
  border-radius: 0;
  font-size: 16px;
  font-weight: 400;
  transition: all .3s;
  margin-right: 10px;
}
.upload-btn{
  margin-left: 10px;
  background-color: #1063f1;
  color: #fff;
  border: 1px solid #1063f1;
  position: relative;
  width: 160px;
  height: 42px;
  border-radius: 0;
  font-size: 16px;
  font-weight: 400;
  transition: all .3s;
}
</style>
